<template>
  <div class="detail">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="详情页"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />

    <!--     店铺头部 -->
    <div
      class="shop-header"
      :style="{
        backgroundImage:
          'url(' + (shopinfo.info && shopinfo.info.poi_back_pic_url) + ')',
      }"
    >
      <div class="left">
        <img :src="shopinfo.info && shopinfo.info.picUrl" alt="" />
        <span>{{ shopinfo.info && shopinfo.info.name }}</span>
      </div>
      <!-- 取消收藏按钮 -->
      <div
        class="right"
        v-if="isCollect"
        @click="$store.dispatch('request_unfav', shopinfo.info)"
        style="color: red"
      >
        ❤
      </div>
      <!-- 收藏按钮 -->
      <div
        class="right"
        v-else
        @click="$store.dispatch('request_fav', shopinfo.info)"
      >
        ❤
      </div>
    </div>

    <!-- 店铺内的 商品分类和列表 -->
    <div class="box">
      <div class="left">
        <van-sidebar v-model="currentIndex">
          <van-sidebar-item
            v-for="(item, index) in shopinfo.taglist"
            :key="index"
            :title="item.name"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <div
          class="good"
          v-for="(item, index) in shopinfo.taglist &&
          shopinfo.taglist[currentIndex].goodlist"
          :key="index"
        >
          <div class="imgbox">
            <img :src="item.picture" alt="" />
          </div>
          <div class="text">
            <div class="up">
              <div class="name">{{ item.name }}</div>
              <div class="desc">{{ item.month_saled_content }}</div>
            </div>
            <div class="down">
              <div class="price">¥{{ item.min_price }}</div>
              <div class="opes">
                <!-- <span @click="request_shopcart_sub(item)" class="sub">-</span> -->
                <!-- <span class="num">0</span> -->
                <span @click="request_shopcart_add(item)" class="add">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车 -->
    <ShopCart ref="shopcart"></ShopCart>
    <div class="submitbar">
      <span>
        <van-icon
          name="cart"
          size="20"
          color="deepskyblue"
          @click="$refs.shopcart.changeVisible()"
        ></van-icon>
       总数: {{this.$store.getters.goodsNum}} 总价: {{this.$store.getters.goodsPrice}}
      </span>
      <span>去结算</span>
    </div>
  </div>
</template>

<script>
//导入vuex中的工具函数(辅助函数) , 使用该工具函数 简化vuex在组件中的应用
import { mapMutations, mapActions } from "vuex";
import { Dialog } from "vant";
import { shop_shopinfo } from "../axios/api";
import ShopCart from "../components/ShopCart.vue";

export default {
  components: { ShopCart },
  data() {
    return {
      currentIndex: 0,
      shopinfo: {},
    };
  },
  computed: {
    isCollect() {
      //当前店铺是否已经收藏( true 表示已收藏, false 表示未收藏 )
      //拿到 当前店铺对象, 还要同时拿到收藏列表, 然后做判断, 返回判断结果
      var index = this.$store.state.collectlist.findIndex((item) => {
        return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
      });
      return index !== -1;
    },
  },
  methods: {
    ...mapMutations(["collect", " cancel_collect"]),
    ...mapActions(["request_fav", "request_unfav", "request_shopcart_add", "request_shopcart_sub"]),
    
  },
  mounted() {
    
    //店铺-详情
    shop_shopinfo({ id: this.$route.params.id }).then((res) => {
      if (res.data.shopinfo) {
        //店铺正常营业
        this.shopinfo = res.data.shopinfo;
        console.log(res.data.shopinfo);
      } else {
        //店铺倒闭
        Dialog.alert({
          title: "提示",
          message: "该店铺已倒闭!",
        }).then(() => {
          this.$router.go(-1);
        });
      }
    });
  },
};
</script>

<style lang='scss' scoped>
.shop-header {
  display: flex;
  justify-content: space-between;
  padding: 50px 10px;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  .left {
    flex: 1;
    display: flex;
    align-items: center;
    img {
      width: 30px;
      margin-right: 10px;
      border-radius: 50%;
    }
  }
  .right {
    width: 20px;
    text-align: right;
  }
}
.box {
  display: flex;
  .left {
    width: 80px;
  }
  .right {
    flex: 1;
    .good {
      display: flex;
      margin: 10px;
      .imgbox {
        width: 80px;
        margin-right: 10px;
        img {
          width: 100%;
        }
      }
      .text {
        flex: 1;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .down {
          display: flex;
          justify-content: space-between;
          button {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: deepskyblue;
            border-radius: 50px;
            line-height: 20px;
            text-align: center;
            border: none;
            margin-right: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

.down .opes .add{
  display: inline-block;
  background: deepskyblue;
  text-align: center;
  width: 20px ;
  height: 20px  ;
  border-radius: 50px;
  line-height: 20px;
}
.down .opes .sub{
  display: inline-block;
  background: deepskyblue;
  text-align: center;
  width: 20px ;
  height: 20px  ;
  border-radius: 50px;
  line-height: 20px;
}

.submitbar {
  background: darkolivegreen;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  span:nth-child(2) {
    background: limegreen;
    color: white;
    display: inline-block;
    padding: 8px 15px;
    border-radius: 5px;
  }
}
</style>